<template>
    <div class="fillcontain">
        <head-top>
        </head-top>
        <el-row style="margin-top: 20px;">
            <el-form ref="form" :model="form" label-width="100px">
                <el-col :span="5" :offset="1">
                    <el-form-item label="城市代码:">
                        <el-input v-model="form.cityCode"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="5" :offset="1">
                    <el-form-item label="预报时间:">
                        <el-input v-model="form.time"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="5" :offset="1">
                    <el-form-item label="天气状况:">
                        <el-input v-model="form.weather"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="5" :offset="1">
                    <el-button type="primary" @click="getUsers">查询</el-button>
                </el-col>
            </el-form>
        </el-row>
        <div class="table_container">
            <el-table
                    :data="tableData"
                    highlight-current-row
                    style="width: 100%">
                <el-table-column
                        property="id"
                        label="id"
                        width="100">
                </el-table-column>
                <el-table-column
                        property="cityCode"
                        label="城市代码"
                        width="150">
                </el-table-column>
                <el-table-column
                        property="time"
                        label="预报时间">
                </el-table-column>
                <el-table-column
                        property="weather"
                        label="天气状况">
                </el-table-column>
                <el-table-column
                        property="temperature"
                        label="温度">
                </el-table-column>
                <el-table-column
                        :formatter="dateFormat"
                        property="creatTime"
                        label="创建时间">
                </el-table-column>
            </el-table>
            <div class="Pagination" style="text-align: left;margin-top: 10px;">
                <el-pagination
                        style="margin-top:15px;"
                        background
                        layout="prev, pager, next"
                        :current-page.sync="pagination.current"
                        :page-size.sync="pagination.size"
                        :total="pagination.count"
                        @current-change="handleCurrentChange">
                </el-pagination>
            </div>

            <el-dialog title="修改用户" v-model="dialogFormVisible">

                <el-form :model="tableData">
                    <el-form-item label="用户姓名" label-width="100px">
                        <el-input v-model="name" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号码" label-width="100px">
                        <el-input v-model="phone" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="城市code" label-width="100px">
                        <el-input v-model="cityCode" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="状态" label-width="100px">
                        <el-input v-model="state" auto-complete="off"></el-input>
                    </el-form-item>

                </el-form>

                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="">确 定</el-button>
                </div>

            </el-dialog>

        </div>
    </div>
</template>

<script>
	import headTop from '../components/headTop'
	import {getUserList, getUserCount} from '@/api/getData'

	export default {
		data() {
			return {
				tableData: [{
					id: 379,
					time: "16日（今天）",
					weather: "多云",
					cityCode: "101280801",
					temperature: "36/29℃",
					creatTime: null
				}],
				pagination: {
					current: 1,
					size: 3,
					count: 0,
					orderby: ''  //升降序
				},
				dialogFormVisible: false,
				name: '',
				id: '',
				cityCode: '',
				phone: '',
				state: '',
				form: {
					time: '',
					cityCode: '',
                    weather: ''
				}
			}
		},

		components: {
			headTop,
		},
		created() {
			this.initData();
		},
		methods: {
			async initData() {
				try {
					this.getUsers(this.pagination.current);
				} catch (err) {
					console.log('获取数据失败', err);
				}
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				this.pagination.current = val;

				this.getUsers(this.pagination.current)
			},
			async getUsers(current) {
				this.$axios({
					url: "http://127.0.0.1:9522/weather/view/getcity/" + this.pagination.current + "/10",
					method: "get",
					params: {
						time: this.form.time,
						cityCode: this.form.cityCode,
						weather: this.form.weather
					}
				}).then(res => {
					console.log(res)
					this.tableData = res.data.records;
					// 当前页
					this.pagination.current = res.data.current;
					this.pagination.size = res.data.size
					this.pagination.count = res.data.total
				})
			},
			handleEdit(index, row) {
				this.getSelectItemData(row, 'edit')
				this.dialogFormVisible = true;
			},
			getSelectItemData(row, type) {
				console.log(row);
				this.name = row.name;
				this.id = row.id;
				this.cityCode = row.cityCode;
				this.phone = row.phone;
				this.state = row.state;
			},
			dateFormat:function(row, column) {
				var date = row[column.property];
				if (date == undefined) {
					return "";
				}
				return this.$moment(date).format("YYYY-MM-DD HH:mm:ss");
			},
	},
	}
</script>

<style lang="less">
    @import '../style/mixin';

    .table_container {
        padding: 20px;
    }
</style>
